<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/TextPlugin.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            flex-direction: column;
        }

        .lead {
            padding: 0 20px;
            text-align: center;
        }

        .gray {
            width: 100%;
            height: 100vh;
        }

        .box {
            width: 150px;
            height: 150px;
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
        }

        .gray p {
            font-size: 1.4em;
            margin: 0;
            padding: 30px;
            line-height: 1.4em;
        }

        .bottom {
            width: 100%;
            text-align: center;
            padding: 150px 30px;
            font-size: 1.2em;
            box-sizing: border-box;
        }
        .gradient-green {
            background: linear-gradient( 114.41deg, #0ae448 20.74%, #abff84 65.5% );
        }
        .bottom-box {
            height: 40vh;
            background-color: #eee;
        }

    </style>
</head>

<body>
    <header class="center pad-l">
        <h1>gsap.matchMedia()</h1>
        <p class="lead">Use matchMedia and the prefers-reduced-motion media feature for easy, accessibility-friendly
            animation.</p>
        <div class="checkbox">
            <input type="checkbox" id="motionToggle" class="vh" name="motionToggle" value="false">
            <label for="motionToggle">Reduced animation please</label>
        </div>
    </header>


    <section class="gray">
        <div class="box gradient-green"></div>
    </section>
    <div class="bottom-box"></div>

    <!-- <button id="animate">animate</button> -->
    <script>
        // use a script tag or an external JS file
        document.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(ScrollTrigger);

            let reduceMotionCB = document.querySelector("#motionToggle");
            reduceMotionCB.checked = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
            reduceMotionCB.addEventListener("change", gsap.matchMediaRefresh); // force all matchMedia() stuff to revert and re-run

            let breakPoint = 800;
            let mm = gsap.matchMedia();

            mm.add({
                isDesktop: `(min-width: ${breakPoint}px)`, // <- when ANY of these are true, the function below gets invoked
                isMobile: `(max-width: ${breakPoint - 1}px)`
            }, (context) => {

                let { isDesktop, isMobile } = context.conditions;
                let reduceMotion = reduceMotionCB.checked; // if we weren't using a checkbox, we could just add another condition above: "(prefers-reduced-motion: reduce)"
                let tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".gray",
                        scrub: 1,
                        end: "400%",
                        pin: true,
                        markers: true
                    }
                });
                tl.to(".box", {
                    scale: reduceMotion ? 3 : 2
                }).to(".box", {
                    scale: 1
                });

                if (!reduceMotion) { // don't rotate the box if reduced motion was requested
                    gsap.to(".box", {
                        rotation: 360,
                        ease: "none",
                        duration: 5,
                        repeat: -1
                    });
                }

                gsap.set(".box", {
                    innerText: isDesktop ? "Desktop" : "Mobile",

                });

                // optionally return a cleanup function
                return () => console.log("cleanup");
            });
        });

    </script>
</body>

</html>